<template>
  <div>
    <!-- 专题 -->
    <div class="special" v-if="special.format_content">
      <div class="back"><span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span>
        <p :style={opacity:titleOff?1:0}>{{special.title}}</p>
      </div>
      <h1 ref="titleOne">{{special.title}}</h1>
      <div v-for="(ele,index) in special.format_content" :key="index">
        <template v-if="ele.type=='image'">
          <div class="img-box" height="290px" width="100%"><img v-lazy="ele.attr.src" alt="" width="100%" height="100%">
          </div>
        </template>
        <template v-if="ele.type=='normal'">
          <p class="normal" :style="{'textAlign':ele.attr.align,'color':'#'+ele.attr.color}">
            {{ele.content | del}}</p>
        </template>
        <template v-if="ele.type=='title'">
          <h6 class="title" :style="{'textAlign':ele.attr.align,'color':'#'+ele.attr.color}">
            {{ele.content}}</h6>
        </template>
        <template v-if="ele.type=='video'">
          <div class="mv" width="100%">
            <video :src="special.content_video[ele.attr.index].source_link"
              :poster="special.content_video[ele.attr.index].image" width="100%" height="210px" controls
              :ref="'video'+index"></video>
            <span class="iconfont icon-24gf-play" @click="playMv(index)" :ref="'ico'+index"></span>
            <!-- :class="iconShow?'icon-24gf-play':'icon-zanting'" @click="playMv" -->
          </div>
        </template>
      </div>
      <div class="ending">
        <p>by Laura</p>
        <p>{{special.publish_time|dateServer}}</p>
      </div>
      <!-- <lazy-component> -->
        <comment  ref="comment" 
          :value="{total: special.comment.total,list: special.comment.list,like: special.count_like,share: special.count_share,postid:special.postid,type:special.post_type,title:special.title}" />
      <!-- </lazy-component> -->
    </div>
    <van-loading type="spinner" color="#1989fa" v-if="!special.format_content" />
  </div>
</template>

<script>
  import {
    getMv
  } from "../api/mv"
  import comment from "../components/details/comment.vue"
  export default {
    props: ['id'],
    components: {
      comment
    },
    data() {
      return {
        special: [],
        titleOff: false, //标题固定
        flag: true //滚动节流
      }
    },
    methods: {
      playMv(index) {
        let span = eval("this.$refs.ico" + (index))[0]; //拿到单独的span
        let video = eval("this.$refs.video" + (index))[0]; //拿到单独的video
        if (span.classList.contains("icon-24gf-play")) {
          video.play()
          span.classList.replace("icon-24gf-play", "icon-zanting")
          span.style.opacity = 0
        } else {
          video.pause()
          span.classList.replace("icon-zanting", "icon-24gf-play")
          span.style.opacity = 1
        }
      },
      heightChange() {

        window.addEventListener('scroll', this.heightAnswer)
      },
      heightAnswer() {

        // let titleTop = document.querySelector('h1').offsetTop
        let titleTop = this.$refs.titleOne.offsetTop;
        if (this.flag) {
          setTimeout(() => {
            if (this.special.format_content) {

              if (document.documentElement.scrollTop >= titleTop) {
                console.log("标题已被遮盖");
                this.titleOff = true;
                this.flag = true;
              } else {
                this.titleOff = false;
                this.flag = true;
              }
            }
          }, 300)
        }
        this.flag = false
      }
    },
    created() {
      getMv({
        postid: this.id
      }).then(data => {
        this.special = data.data;
        console.log(this.special);
      })
    },
    filters: {
      del(val) {
        // return val.replace(/\[.*?\]/g,'')
        // console.log(val.replace(/\[.*?\]/g,''));
        // let i=val.replace(/\[/g,'<');
        // i=i.replace(/\]/g,'>');
        let i = val.replace(/\[.*?\]/g, '')
        return i
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.heightChange()
      })
    },
    destroyed() {
      window.removeEventListener('scroll', this.heightAnswer)
    },
    beforeDestroy() {
      this.$refs.comment.cancellation(); //调用子组件传vuex
    }
  }
</script>

<style lang="less" scoped>
  .special {
    background-color: #fff;
    padding-top: 40px;

    .back {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;

      line-height: 40px;
      background-color: #fff;
      z-index: 9;
      text-align: center;

      span {
        position: absolute;
        left: 18px;
        font-size: 18px;
        font-weight: 600;
        z-index: 10;
      }

      p {
        font-weight: 600;
        border-bottom: 1px solid #efefef;
        transition: all .3s;
        opacity: 0;
        font-size: 16px;
      }
    }

    .img-box {
      margin-bottom: 28px;
    }

    h1 {
      font-size: 20px;
      line-height: 36px;
      text-align: center;
      padding-bottom: 14px;
    }

    .normal,
    .title {
      font-size: 10px;
      padding: 0px 16px 26px 16px;
      line-height: 22px;
    }
    .title{
      font-size: 14px;
    }

    .mv {
      margin-bottom: 40px;
      position: relative;

      video {
        object-fit: fill;
      }

      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 28px;
        color: #fff;
        opacity: 1;
        transition: all 3s;
      }
    }

    .ending {
      text-align: center;
      line-height: 24px;
      margin: 20px 0 0 30px;

      & p:nth-child(1) {
        color: #6B6D6B;
      }

      & p:nth-child(2) {
        color: #ccc;
        font-size: 12px
      }
    }
  }

  .van-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>